<template>
<div class="task-collect">
    <el-row>
        <el-col :span="22" :offset="1" v-if="TaskList.length">
            <el-card class="planList" v-for="(item, index) in TaskList" :key="index">
                <h1>
                    <el-button v-if="currentTask.value.id === item.id" type="success"  :loading="loading" size="mini" @click="handleCurrentTask(item)">当前</el-button>
                    <el-button v-if="currentTask.value.id === item.id" type="danger"  :loading="loading" size="mini" @click="handleOutCurrenttTask()">退出</el-button>
                    <el-button v-else type="primary" size="mini"  :loading="loading" @click="handleCurrentTask(item)">选择</el-button>
                    <span class="title" v-if="currentTask.value.id === item.id" style="
                padding: 0;
                font-size: 18px;
                margin-top: 5px;
                font-weight: bold;
                display: block;
                color: red;
              ">{{ item.planName }}</span>
                    <span class="title" v-else>{{ item.planName }}</span>
                </h1>
                <ul>
                    <li>
                        <strong>任务开始时间：</strong>
                        <time :datetime="item.planStartTime">{{
                item.planStartTime | formatDate
              }}</time>
                    </li>
                    <li>
                        <strong>任务结束时间：</strong>
                        <time :datetime="item.planEndTime">{{
                item.planEndTime | formatDate
              }}</time>
                    </li>
                    <li class="flex">
                        <viewCollectionArea :id="item.id">采集区域</viewCollectionArea>
                        <ViewCollectionRequirements :planrequire="item.planRequire">采集要求</ViewCollectionRequirements>
                        <TaskPerformance :planId="item.id">执行情况</TaskPerformance>
                        <DataInventory :item="item">数据清单</DataInventory>
                    </li>
                    <li class="flex card">
                        <div class="num">
                            <strong>图斑总数：</strong><span>{{ item.collectTaskLandRs[0].total }}</span>
                        </div>
                        <div class="num">
                            <strong>已审核：</strong><span>{{ item.collectTaskLandRs[0].auditStatusNum }}</span>
                        </div>
                        <div class="num">
                            <strong>已采集：</strong><span>{{ item.collectTaskLandRs[0].collectNum }}</span>
                        </div>
                        <div class="num">
                            <strong>未采集：</strong><span>{{ item.collectTaskLandRs[0].noCollectNum }}</span>
                        </div>
                    </li>
                </ul>
            </el-card>
        </el-col>
        <el-col :span="22" :offset="1" v-else>
            <el-card class="planList" style="padding: 15px 0"><i class="el-icon-s-opportunity" style="color: green"></i>
                {{
            activeName === "first" ? "您当前没有任何的任务" : "当前没有到期任务"
          }}
            </el-card>
        </el-col>
    </el-row>
</div>
</template>

<script>
import {
    mapState
} from "vuex";
export default {
    name: "TaskCollect",
    props: {
        TaskList: {
            type: Array,
            default: function () {
                return [];
            },
        },
        activeName: {
            type: String,
            default: "null",
        },
    },
    data() {
        return {
            userInfo: {},
            currentTaskButton: "当前任务",
            loading:false,
        };
    },
    components: {
        DataInventory: () => import("./DataInventory/DataInventory.vue"),
        TaskPerformance: () => import("./TaskPerformance/TaskPerformance.vue"),
        viewCollectionArea: () =>
            import("./viewCollectionArea/viewCollectionArea.vue"),
        ViewCollectionRequirements: () =>
            import("./ViewCollectionRequirements/ViewCollectionRequirements.vue"),
    },
    computed: {
        ...mapState({
            currentTask: (state) => {
                return state.currentTask.Task;
            },
        }),
    },
    methods: {
        handleOutCurrenttTask() {
            this.$store.dispatch("currentTask/setAsyncCurrentTask", {
                data: {},
                value: {},
            }).then((res)=>{
                this.$emit("filterMapSuccess", {
                    title: "townsValue",
                    value: "全部"
                });
            })
        },
        handleCurrentTask(item) {
            this.loading = true
            this.$axios
                .get("task/task/getAListOfPlans?planInfo.Id=" + item.id)
                .then((res) => {
                    this.$store.commit("currentTask/setCurrentTask", {
                        data: res.data.list[0],
                        value: item,
                    });
                    localStorage.setItem(
                        "currentTask/setCurrentTask",
                        JSON.stringify({
                            data: res.data.list[0],
                            value: item,
                        })
                    );
                    this.$emit("filterMapSuccess", {
                        data: res.data.list[0],
                        value: item,
                    });
                    this.loading = false
                });
        },
    },
};
</script>

<style lang="scss">
.task-collect {
    .planList {
        font-size: 14px;
        margin-bottom: 10px;
        padding-bottom: 0px;

        h1 {
            padding: 15px 0;
        }

        .title {
            padding: 0 10px;
            font-size: 18px;
            text-overflow: ellipsis;
            height: 25px;
            line-height: 25px;
            overflow: hidden;
            width: 100%;
        }

        .el-card__body {
            padding: 0px 10px;
        }

        ul {
            padding: 0;
            margin: 0;
            list-style: none;

            li {
                line-height: 25px;
            }

            .card {
                background: rgba(100, 100, 100, 0);
                border-radius: 5px;
                padding: 0px 5px;
            }

            .flex {
                margin: 10px 0;
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;

                >.num {
                    box-sizing: border-box;
                    margin: 1px 0;

                    strong {
                        display: inline-block;
                        width: 80px;
                        text-align: right;
                        color: #666;
                    }

                    display: block;
                    width: 50%;
                }
            }
        }
    }
}
</style>
